<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>想即做thinkTodo任务清单</title>
	<script src="/libs/react-15.2.0/build/react.js"></script>
    <script src="/libs/react-15.2.0/build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>	
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<link href="/libs/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="/_assets/css/base.css" >
	<link rel="stylesheet" href="/_assets/css/home_with_bs.css" >
	<link rel="stylesheet" href="/_assets/css/task_with_bs.css" >
	<link rel="stylesheet" href="/_assets/css/style_tags.css" >
  </head>
<body>
<div id="container">
</div>
<div id="task_view">
</div>
<div id="task_view2">
</div>
    <script type="text/babel">
      var ExampleApplication = React.createClass({
        render: function() {
          var elapsed = Math.round(this.props.elapsed  / 100);
          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
          var message =
            'React has been successfully running for ' + seconds + ' seconds.';
          return <p>{message}</p>;
        }
      });
      var start = new Date().getTime();
      setInterval(function() {
        ReactDOM.render(
          <ExampleApplication elapsed={new Date().getTime() - start} />,
          document.getElementById('container')
        );
      }, 50);
    </script>
	
<script type="text/babel">
      var TaskHead = React.createClass({
        render: function() {
          return <div className="task_head">
					<span className="task_title">{this.props.task_title}</span>
				</div>;
        }
      });
	  
	  var TaskList = React.createClass({
        render: function() {
          return <div className="task_list" id={this.props.domid+'list'}>
				</div>;
        }
      });
	  
	  var Task = React.createClass({
		getInitialState: function() {
			return {hasChildTask: false};
		},  
        render: function() {
          return <div className="task" data-taskid={this.props.taskid} id={this.props.domid} draggable="true" ondragstart="task_dragstart(event)" data-sort={this.props.sort} data-stage="" data-getway="P" data-intags="" data-tags="" ondragover="task_dragover(event)" ondrop="task_drop(event)" ondragenter="task_dragenter(event)" ondragleave="task_dragleave(event)">
					<TaskHead task_title={this.props.task_title}/>
					<TaskList domid={this.props.domid} />
				</div>;
        }
      });
	
	function refresh_all_and_append(){
		var parent;
		var element;
		var noappenditems=new Array;
		var items;
		var i=0;
		$.getJSON("/index.php/task/getall/", 
			function(dataGet) { 
//			console.log(dataGet);
				if(dataGet.data){
//					$("div.task[data-taskid="+id+"]"+" div").remove();
//					parentid=0;
//					console.log(dataGet.data);
					items=dataGet.data;
					console.log(items);
					
					// ReactDOM.render(
					  // <div>
					  // {
						// items.map(function (item) {		 
						  // return <Task task_title={item.title} taskid={item.id} domid="" sort={item.sort}/>
						// })
					  // }
					  // </div>,
					  // document.getElementById('task_view2')
					// );
					
					while(items.length>0){
						i++;
						$.each(items,function(idx,item){ 
							console.log(item);
							 element = $(".task[data-taskid="+item.parent+"]"+' '+".task[data-taskid="+item.id+"]");
							 parent = $(".task[data-taskid="+item.parent+"]");
							 if(element.length>0){//本任务已建
//								items.splice(idx,1);
							 }else{
								if(parent.length>0){//父任务已建
									var parent_domid=$(".task[data-taskid="+item.parent+"]>.task_list").attr("id");
									console.log("父任务id:"+parent_domid);
									if(parent_domid){
										var new_dom_id = unique_dom_id++;
										ReactDOM.render(	   
											<Task task_title={item.title} taskid={item.id} domid={new_dom_id} sort={item.sort} />,
											document.getElementById(parent_domid)
										);
									}
									 //$(".task[data-taskid="+item.parent+"]").append(new_task(item));
									 
									// $(".task[data-taskid="+item.id+"]").css('display','none');
	//								items.splice(idx,1);
								
								}else{
									console.log(item);
									console.log(idx);
									// noappenditems.push(item);
								}
								
							}	
						}); 
//						console.log(noappenditems);
						if(items.length==noappenditems.length||i>2){
							break;
						}
						items=noappenditems;
						noappenditems=Array(0);
						
					}
					
					$('#btn_refresh_all i').removeClass('fa-spin');
//					expend_icon_status();
				}
			}		
		);
		$('#btn_refresh_all i').addClass('fa-spin');
	}

	  
	var unique_dom_id=1000;
	 ReactDOM.render(	   
		<Task task_title="所有任务" taskid="1" domid="900" sort="2342" />,
		document.getElementById('task_view2')
	);
	refresh_all_and_append();  
</script>
	
  </body>
</html>